Live Server安装与使用

Visual Studio Code 可安装静态web服务器 Live Server用于运行前端代码，方便调试，实现了保存页面自动刷新。最新的 Live Server已支持php动态页面。

参考链接：
vscode-Live Server的使用心得 - 马玲俊 - 博客园
vscode运行前端代码 - 赵小生z - 博客园

vscode-Live Server—–http服务器（相当于使用nodejs的http-server ）。

安装

安装方法:
点击左侧第五个图标，打开“扩展”页面，在文本框中输入Live Server，点击第一个搜索结果，在右侧页面中点击安装，等待安装完成。

运行

开启Server（服务）
有四种方式：

1.在窗口的最底部有Go Live按钮可以点击，一旦点击，就会自动在浏览器中打开HTML文件,再点击一次，即停止运行服务器。

2.在HTML文件中右键，然后点击Open with Live Server

3.快捷键 (alt+L, O) 打开服务 (alt+L, C) 关闭服务

4.按F1,然后在输入栏中输入
Live Server: Open with Live Server 打开服务，
或者 Live Server: Close Live Server 关闭服务

配置

Live Server有一些默认配置选项，用户可以修改。
点击 文件->首选项->设置， 在右侧页面中找到 Live Server Config，其中列出的是本插件的配置属性。将其复制到右侧，修改属性值，点击保存即可。
设置的含义，查找该插件的说明文档。
注意，VSCode 中的所有设置都是通过json格式的数据配置的。用户可以查找对应的key值，修改其value，从而修改配置属性。

关于Live Server的配置

 1 {
 2 "liveServer.settings.port": 8080, //设置本地服务的端口号
 3     "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
 4     "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
 5     "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
 6     "liveServer.settings.NoBrowser": false,
 7     "liveServer.settings.ignoredFiles": [//设置忽略的文件
 8         ".vscode/**",
 9         "**/*.scss",
10         "**/*.sass"
11     ]
12 }

使用注意事项

1、设置服务根路径的配置，只能设置到文件夹，不能设置到具体的HTML文件，例如 /dist/test.html 结果能打开页面，但是文件里面引用的文件加载出现报错。

2、根目录下会自动打开index.html